import React, { Component } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router'
import { Table, Pagination, Popconfirm, Button } from 'antd';
import Dialog from './Dialog';
import styles from './Users.css';
const PAGE_SIZE = 10;

class Users extends Component {
    constructor(props){
        super(props);
        this.state = {
            title: '',
            visible: false
        };
        this.columns = [
            {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
                render: (text) => <Link to={`users/detail`}>{text}</Link>,
            }, {
                title: 'NickName',
                dataIndex: 'nickName',
                key: 'nickName'
            }, {
                title: 'Age',
                dataIndex: 'age',
                key: 'age'
            }, {
                title: 'Email',
                dataIndex: 'email',
                key: 'email'
            }, {
                title: 'Phone',
                dataIndex: 'phone',
                key: 'phone'
            }, {
                title: 'Address',
                dataIndex: 'address',
                key: 'address'
            }, {
                title: 'Operation',
                key: 'operation',
                render: ({ id }) => (
                    <span>
                        <span className={styles.operation} onClick={() => this.updateHandler(id)}>Edit</span>
                        <Popconfirm title="Confirm to delete?" onConfirm={() => this.deleteHandler(id)}>
                            <span className={styles.operation}>Delete</span>
                        </Popconfirm>
                    </span>
                )
            }
        ];
    }

    //每行的操作方法
    deleteHandler = (id) => {
        const { dispatch } = this.props;
        dispatch({ type: 'users/remove',payload: { id: id } });
        dispatch({ type: 'users/fetch',payload: { page: 1 } });
    };
    updateHandler = (id) => {
        const { dispatch, list } = this.props;
        let editItem = list.filter((item) => {
            if (item.id === id){
                return item;
            }
            return item;
        });
        this.setState({
            title: 'Edit user information',
            visible: true,
        });
        dispatch({ type: 'users/editData',payload: { editItem } });
    };

    //新增用户功能
    showModal = () => {
        this.setState({
            title: 'Create a new user',
            visible: true
        });
    };
    handleCancel = () => {
        this.setState({
            title: '',
            visible: false
        });
    };
    handleCreate = () => {
        const form = this.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            const { dispatch } = this.props;
            dispatch({type: 'users/create',payload: { values: values }});
            dispatch({type: 'users/fetch',payload: { page: 1 }});
            form.resetFields();
            this.setState({ visible: false });
        });
    };
    saveFormRef = (form) => {
        this.form = form;
    };

    //分页功能
    changePage = (newPage) => {
        const { dispatch } = this.props;
        dispatch({type: 'users/fetch',payload:{ page: newPage }});
    };

    render(){
        const { list,total,page } = this.props.users;
        const isLoading = this.props.loading.effects['users/fetch'];
        return (
            <div className={styles.normal}>
                <Button type="primary" onClick={this.showModal}>Create</Button>
                <Dialog
                    ref={this.saveFormRef}
                    title={this.state.title}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
                <Table
                    bordered
                    size='small'
                    loading={isLoading}
                    columns={this.columns}
                    dataSource={list}
                    rowKey={record => record.id}
                    pagination={false}
                />
                <Pagination
                    className="ant-table-pagination"
                    total={total}
                    current={page}
                    pageSize={PAGE_SIZE}
                    onChange={this.changePage}
                />
            </div>
        )
    }
}

export default connect(({ users, loading }) => ({ users, loading }))(Users);